<template>
  <n-tooltip :show="showPopover" placement="top">
    <template #trigger>
      <div
        class="wrapper"
        v-bind="$attrs"
        @mouseenter="() => (showPopover = true)"
        @mouseleave="() => (showPopover = false)"
      >
        <input id="exp1" class="exp" type="checkbox" @change="change" />
        <div class="text">
          <label class="btn" for="exp1" :data-text="showText"></label>
          {{ text }}
        </div>
      </div>
    </template>

    <!-- 暴露提示框给使用者自定义 -->
    <slot name="diyTooltip">
      {{ text }}
    </slot>
  </n-tooltip>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    text: string // 展示文本
    diyTooltip?: boolean // 是否自定义toolTip
    propLineClamp?: number // 最大行数省略
    expandText?: string // 展开文本
    packText?: string // 收起文本
  }>(),
  {
    diyTooltip: false,
    propLineClamp: 2,
    expandText: '展开',
    packText: '收起'
  }
)

const showText = ref(props.expandText)
const showPopover = ref(false) // 控制toolTip的展示

const maxHeight = computed(() => {
  return props.propLineClamp * 1.5 + 'em'
})

// 收起和展开触发事件
function change() {
  const { expandText, packText } = props
  if (showText.value === expandText) {
    showText.value = packText
    return
  }
  showText.value = expandText
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  overflow: hidden;
  // box-shadow:
  //   20px 20px 60px #bebebe,
  //   -20px -20px 60px #ffffff;
}
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  // text-align: justify;
  /* display: flex; */
  /*   display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; */
  position: relative;
  line-height: 1.5;
  max-height: v-bind(maxHeight);
  transition: 0.3s max-height;
  &::before {
    content: '';
    height: calc(100% - 26px);
    float: right;
  }
  &::after {
    content: '';
    width: 999vw;
    height: 999vw;
    position: absolute;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    margin-left: -100px;
  }
}

.btn {
  position: relative;
  float: right;
  clear: both;
  margin-left: 20px;
  font-size: 16px;
  padding: 0 8px;
  // background: #3f51b5;
  line-height: 24px;
  border-radius: 4px;
  color: #1d85ff;
  cursor: pointer;
  /* margin-top: -30px; */
  &::after {
    content: attr(data-text);
    font-size: 14px;
  }
  &::before {
    content: '...';
    position: absolute;
    left: -5px;
    color: #333;
    transform: translateX(-100%);
  }
}

.exp {
  display: none;
}
.exp:checked + .text {
  max-height: none;
}
.exp:checked + .text::after {
  visibility: hidden;
}
.exp:checked + .text .btn::before {
  visibility: hidden;
}
.exp:checked + .text .btn::after {
  content: attr(data-text);
  font-size: 14px;
}
</style>
